<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="js/vendor/d3.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
	(function () {
		var dataArray = getRandomData();
		var data = dataArray.map(function(d) { return d.value; });

		var canvasHeight = 600;
		var canvasWidth = 600;

		var svg = d3
			.select("body")
			.append("svg")
			.attr("height", canvasHeight)
			.attr("width", canvasWidth);

		svg.append("rect").attr("fill", "#cccccc").attr("width", canvasWidth).attr("height", canvasHeight);

		var canvas = svg.append("g").attr("transform", "translate(20,20)");

		var histogram = d3.layout.histogram().bins(8)(data);

		var y = d3.scale.linear().domain([0, d3.max(histogram.map(function(e) {
			return e.length;
		}))]).range([0, canvasHeight-50]);

		var x = d3.scale.linear().domain([0, d3.max(data)]).range([0, canvasWidth-50]);

		var xAxis = d3.svg.axis()
			.scale(x)
			.orient("bottom");

		canvas.append("g").call(xAxis).attr("transform", "translate(0,550)");

		var bar = canvas.selectAll(".bar")
			.data(histogram)
			.enter()
			.append("g")
			.attr("class", "bar");

		bar.append("rect")
			.attr("x", function(d) { return x(d.x);})
			.attr("y", function(d) { return canvasHeight-50-y(d.y);})
			.attr("width", function(d) { return x(d.dx); })
			.attr("height", function(d) { return y(d.y); })
			.attr("fill", "steelblue")

		bar.append("text")
			.text(function(d) {
				return d.y===0 ? "" : d.y
			})
			.attr("x", function(d){ return x(d.x)})
			.attr("y", function(d){ return canvasHeight-50-y(d.y)})
			.attr("dy", 30)
			.attr("dx", function(d) { return x(d.dx)/2; });


		function getRandomData() {
			var d = [];
			for (var n = 0; n < 20; n++) {
				d[d.length] = {
					name: "pName" + n,
					value: Math.floor(Math.random() * n) + 1
				};
			}
			return d;
		}
	}());
</script>
</body>
</html>